<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>八卦</title>
	<style>
		#outside{
			width: 0;
			height: 400px;
			margin: 100px auto;
			border-left: black solid 200px;
			border-right: white solid 200px;
			border-radius: 100%;
			box-shadow: 0 0 10px black;
			position: relative;
			transition: all 1000s linear;
		}
		#outside::after{
			content: '';
			width: 200px;
			height: 200px;
			position: absolute;
			top: 0;
			left: -100px;
			background: black;
			border-radius: 50%;
			box-shadow: 0 200px 0 white;
		}
		#outside::before{
			content: '';
			width: 50px;
			height: 50px;
			position: absolute;
			top: 75px;
			left: -25px;
			border-radius: 50%;
			background: white;
			z-index: 10;
			box-shadow: 0 200px 0 black;
		}

		#outside:hover{
			transform: rotate(36000deg);
		}
	</style>
</head>
<body>
	<div id="outside">
	</div>
</body>
</html>